<template>
  <!-- 基础数据管理 -->
  <div v-loading="isLoading">
    <!-- 左侧树状图  -->
    <el-tree :data="orgs" :props="defaultProps" @node-click="handleNodeClick" />
    <!-- 机构信息表单 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="机构编号">
        <el-input v-model="form.id" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="机构名称">
        <el-input v-model="form.name" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="机构类型">
        <el-select v-model="form.type" :disabled="disabled">
          <el-option :label="form.type" :value="form.type" />
        </el-select>
      </el-form-item>
      <el-form-item label="机构地址" class="orgSide">
        <el-select v-model="sheng" :disabled="isdisabled">
          <!--上面的 v-model 和这里的 :value与下面的val相关联,绑定item.id下面拿到的是id,如果是itme.name,就是name -->
          <el-option
            v-for="item in shengList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="shi" :disabled="isdisabled">
          <el-option
            v-for="item in shiList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="xian" :disabled="isdisabled">
          <el-option
            v-for="item in xianList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.address" :disabled="isdisabled" />
      </el-form-item>
      <el-form-item label="经度">
        <el-input v-model="form.longitude" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="纬度">
        <el-input v-model="form.latitude" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="机构负责人">
        <el-input v-model="form.managerName" :disabled="isdisabled" />
      </el-form-item>
      <el-form-item label="机构电话">
        <el-input v-model="form.phone" :disabled="isdisabled" />
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="onSubmit">{{
          isdisabled === true ? '编辑' : '保存'
        }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 员工信息 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- el-table-column 列：通过prop绑定数据中的键 -->
      <!-- 列名：通过label来设置 -->
      <el-table-column type="index" :index="indexFn" label="序号" width="100" />
      <el-table-column prop="userId" label="员工编号" width="200" />
      <el-table-column prop="name" label="员工姓名" width="100" />
      <el-table-column prop="mobile" label="手机号" width="200" />
      <el-table-column prop="agency.name" label="所属机构" width="160" />
      <el-table-column prop="account" label="系统账户" width="100" />
      <el-table-column prop="roleNames[0]" label="系统角色" width="100" />
      <el-table-column
        prop="status"
        label="账户状态"
        :formatter="formatterFn"
        width="100"
      />
    </el-table>
    <!--
                current-page 当前页
                page-sizes 可供选择的每页条数
                page-sizes 每页显示条目个数
                layout 布局控件，决定了显示多少个控件
                total 总条目数
                @size-change 每页条数变化了，切换了每页的条数
                @current-change 当前页变化，改变当前页触发执行
              -->
    <el-pagination
      :current-page="page"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import { getOrganApi } from '@/api/user'
import { getOrgMessageApi, getRoleListApi } from '@/api/org'
// editOrgApi 编辑有问题
import { getSiteApi } from '@/api/site'
export default {
  data() {
    return {
      isLoading: false,
      orgs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 机构表单
      form: {
        id: '', // 机构id
        name: '', // 名称
        phone: '', // 电话
        type: '', // 机构类型
        address: '', // 详细地址
        latitude: '', // 纬度
        longitude: '', // 经度
        managerName: '' // 负责人
      },
      provinces: '',
      disabled: true, // 固定写死的不能修改
      isdisabled: true, // 可以修改的

      sheng: '', // 省
      shi: '', // 市
      xian: '', // 县
      shengList: [], // 省
      shiList: [], // 市
      xianList: [], // 县

      //
      // 员工
      tableData: [],
      total: 0, // 总条数
      page: 1, // 当前页码
      pageSize: 5 // 每页的数据条数
    }
  },
  watch: {
    // 侦听省的变化拿到选定省的id（val)
    sheng: {
      handler: async function (val) {
        // 这里必须进行判断，因为是侦听，点左侧树状图的时候值也会变，也就会走这里
        // 清空并发起请求，必须根据编辑按判断一下，如果是禁用状态，就不做清
        // 空和发起请求，正常通过树状图请求数据，如果是非禁用状态，就走下面的步骤
        if (!this.isdisabled) {
          // val: 每一项的id
          // 这里做清空是因为省的变化了要清空后面的两个
          this.shiList = []
          this.shi = ''
          // console.log(this.shiList)
          this.shiList = await this.getSiteFn(val)
        }
      }
    },
    // 侦听市
    shi: {
      handler: async function (val) {
        if (!this.isdisabled) {
          this.xianList = []
          this.xian = ''
          if (this.shi !== '') {
            this.xianList = await this.getSiteFn(val)
          }
        }
      }
    }
  },

  async created() {
    this.isLoading = true
    const res = await getOrganApi()
    const org = JSON.parse(res.data.data)
    // console.log(org)
    const orgList = this.transListToTreeData(org, '0')
    this.orgs = orgList

    // 这里请求到的是省
    const arr = await this.getSiteFn('')
    this.shengList = arr
    this.isLoading = false
  },

  methods: {
    // 对接口返回的部门列表，进行二次加工，（加工成树形数据）左侧树状图
    transListToTreeData(data, value) {
      const arr = []
      data.forEach((item) => {
        if (item.parentId === value) {
          const son = this.transListToTreeData(data, item.id)
          if (son.length > 0) {
            item.children = son
          }
          arr.push(item)
        }
      })
      return arr
    },

    // 左侧树状图每一项点击事件
    async handleNodeClick(data) {
      // 点击左侧树状图，右侧表单做禁用状态
      this.isdisabled = true
      // data:每一项数据
      // console.log(data.id)
      // 机构
      const res = await getOrgMessageApi(data.id)
      // console.log(res)
      this.form = res.data.data
      this.sheng = res.data.data.province.name
      this.shi = res.data.data.city.name
      this.xian = res.data.data.county.name

      if (res.data.data.type === 1) {
        this.form.type = '一级转运中心'
      } else if (res.data.data.type === 2) {
        this.form.type = '二级转运'
      } else if (res.data.data.type === 3) {
        this.form.type = '网点'
      }
      // 人员
      this.getRoleList()
    },

    // 人员
    async getRoleList() {
      const ress = await getRoleListApi(this.page, this.pageSize)
      // console.log(ress.data.data.items)
      this.tableData = ress.data.data.items
      if (ress.data.data.items.status === 1) {
        this.tableData.status = '正常'
      }
      this.total = Number(ress.data.data.counts)
    },

    // 机构编辑按钮
    onSubmit() {
      this.isdisabled = !this.isdisabled
      // if (this.isdisabled === false) {
      // }

      // const qq =
      // await editOrgApi()
      // console.log(qq)
    },

    // 请求地址
    async getSiteFn(val) {
      const ww = await getSiteApi(val)
      return ww.data.data
    },

    // 序号
    indexFn(index) {
      return index + 1 + (this.page - 1) * this.pageSize
    },
    // 员工账户状态
    formatterFn(row, column, cellValue) {
      if (cellValue === 1) {
        return '正常'
      }
      return cellValue
    },
    // 每页条数变化了，切换了每页的条数
    handleSizeChange(val) {
      // 切换了每页几条数据，跳回到第一页
      this.page = 1
      this.pageSize = val
      console.log(this.pageSize)
      this.getRoleList()
      // console.log(`每页 ${val} 条`)
    },
    // 当前页变化，改变当前页触发执行
    handleCurrentChange(val) {
      this.page = val
      this.getRoleList()
      // console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
// 左侧树状图
.el-tree {
  float: left;
  margin-top: 60px;
  background-color: rgb(255, 248, 248);
  width: 200px;
  height: 600px;
}
// 机构
.el-form {
  background-color: rgb(255, 248, 248);
  margin-top: 60px;
  margin-left: 30px;
  width: 1050px;
  float: left;
  .el-form-item {
    float: left;
    width: 300px;
  }
}
.el-form-item__label {
  width: 200px !important;
}
.el-input__inner {
  width: 600px !important;
  margin: 0 30px !important;
}
.orgSide {
  width: 1000px !important;
  // background-color: red;
}
// 员工
.el-table--enable-row-transition {
  // float: right;
  width: 1100px !important;
  padding-left: 30px;
  padding-top: 20px;
}
.el-table--enable-row-hover {
  width: 1100px !important;
  padding-left: 30px;
  padding-top: 20px;
}
// 分页
.el-pagination {
  width: 500px;
  margin-left: 500px;
  padding: 20px 0;
}
</style>
